<template>
  <n-tooltip :disabled="disabled">
    <template #trigger>
      <div
        :class="disabled ? 'cursor-no-drop' : 'cursor-pointer'"
        @click="handleClick"
      >
        <icon
          :icon="icon"
          :class="checked ? 'text-primary!' : 'text-gray'"
          :style="{
            color: color,
            fontSize: size,
          }"
        />
      </div>
    </template>
    {{ tip }}
  </n-tooltip>
</template>

<script lang="ts" setup>
import { Icon } from "@iconify/vue";

interface Props {
  checked?: boolean;
  icon: string;
  tip: string;
  disabled?: boolean;
  size?: number;
  color?: string;
  onClickEvent?: Function;
}
interface Emits {
  (e: "clickEvent"): void;
}
const props = withDefaults(defineProps<Props>(), {
  size: 20,
  color: "gray",
});
const emits = defineEmits<Emits>();

const handleClick = () => {
  if (props.disabled) return;
  emits("clickEvent");
  props.onClickEvent?.();
};
</script>
